<template>
  <div class="live">
    <header>
      <i class="iconfont icon-angle-left"></i>
      <h3>直播</h3>
      <p>
        <i class="iconfont icon-gengduo"></i>
        <i class="iconfont icon-play1"></i>
      </p>
    </header>
    <main>
      <div class="Wonderful_replay">
        <dl>
          <dt>
            <iframe src="//player.bilibili.com/player.html?aid=632208489&bvid=BV1Fb4y167Ln&cid=384357915&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </dt>
          <dd>
            <h2>活动经费不待见节点阀门</h2>
            <p>
              <i class="iconfont icon-tongzhi"></i><span>2020-09-25 14:18</span>
            </p>
          </dd>
        </dl>
          <dl>
          <dt>
            <iframe src="//player.bilibili.com/player.html?aid=967834289&bvid=BV1Ep4y1y7gz&cid=179740852&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </dt>
          <dd>
            <h2>舌尖上的福州达芙妮叠加方块</h2>
            <p>
              <i class="iconfont icon-tongzhi"></i><span>2020-09-25 14:18</span>
            </p>
          </dd>
        </dl>
      </div>
      <div class="fixed" @click="goNewLive">
        <img src="https://img1.baidu.com/it/u=1052699670,1112255788&fm=26&fmt=auto&gp=0.jpg" alt="">
      </div>
    </main>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {},
  methods: {
    goNewLive () {
      this.$router.push('/newLive')
    }
  }
})
</script>

<style scoped lang='scss'>
.live {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 45px;
    background-color: skyblue;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: #fff;
    h3 {
      font-weight: normal;
    }
    p {
      width: 80px;
      padding: 2px 10px;
      display: flex;
      justify-content: space-around;
      border: 1px solid #eee;
      border-radius: 15px;
    }
  }
}
main {
  flex: 1;
  overflow-y: scroll;
  background-color: #eee;
}
.Wonderful_replay {
  width: 100%;
  min-height: 620px;
  dl {
    width: 100%;
    height: 220px;
    background-color: #fff;
    padding: 0 10px;
    margin-bottom: 15px;
    dt {
      width: 100%;
      height: 160px;
      padding: 5px 0;
    }
    dd {
      width: 100%;
      height: 60px;
      h2 {
        font-size: 22px;
        height: 30px;
        line-height: 30px;
      }
      p {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #cac9c9;
        height: 30px;
      }
    }
  }
}
.fixed{
  width: 50px;
  height: 50px;
  position:fixed;
  bottom: 100px;
  right: 0;
  img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
</style>
